<template>
<div>
  <el-container>
    <el-header height="80px">
      <!--header开始-->
      <div class="header w h80 bg_grn_119c5b">
      <div class="w1200 bc clearfix ">
        <img @click="goHome" src="../../static/images/logo.png" alt="logo " class="logo fl w100 h44 mt18 mb18 " />
        <ul class="nav fl mt30 mb30 ml70">
          <li class="fl"><a @click="goHome" class="fm_yahei f16 c100 lh100 plr36 ">首页</a><i class="navLine fr"></i></li>
          <li class="fl"><a @click="goFiled" class="fm_yahei f16 c100 lh100 plr36 ">场地</a><i class="navLine fr"></i></li>
          <li class="fl"><a @click="goActivity" class="fm_yahei f16 c100 lh100 plr36 ">活动</a><i class="navLine fr"></i></li>
          <li class="fl"><a @click="goCommunity" class="fm_yahei f16 c100 lh100 plr36 ">圈子</a></li>
        </ul>
        <ul class="login fr"  @mouseover="changeNavStateTrue" @mouseleave="changeNavStateClose">
          <div v-if="isLogin">
            <li class="fl userBtn pr">
              <a class="fm_yahei f14 c100 pl20 pointer" mark="0" @click="gotoUser">
                <img :src="$store['state']['userHeadPic']+'?x-oss-process=image/resize,m_fill,h_30,w_30'" alt="" class="userHeadPic">
                {{$store['state']['userNickName']}}
              </a>
              <!--悬浮菜单-->
              <ul class=" topBar w160 bg100 c7 tc fm-yahei f14 lh40 " v-show="navState">
                <img class="topBarArr" src="static/images/topBar-arr-up.png" width="24" height="12" />
                <!--<li v-for="item in navList"><a class="block hoverBg_grnWhite_f4fffa c7" href="javascript:void(0);" @click="gotoOtherPage(item['flag'])">{{item['name']}}</a></li>-->
                <li class=" "><a class="block hoverBg_grnWhite_f4fffa c7" href="javascript:void(0);" @click="logOut">退出登录</a></li>
              </ul><!--悬浮菜单结束-->
            </li>
          </div>
          <div v-else>
            <li @click="openPopup" class="fl"><a class="fm_yahei f14 c100 lh100 pl20 pointer" mark="0" >登录</a></li>
            <li @click="openPopup" class="fl"><a class="fm_yahei f14 c100 lh100 pl20 pointer" mark="1" >注册</a></li>
          </div>
        </ul>
        <div class="searchbox fr">
          <input type="text" class="search f14 lh200 c100 t2" value="" />
          <a class="search-btn"><img src="../../static/images/search-btn.png"/></a>
        </div>
      </div>
    </div>
    </el-header>
    <!-- <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main> -->
    <!-- <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
    <el-footer>Footer</el-footer>-->
  </el-container>
  <Login @toggle="change" @islogin = "islogin" v-if="changeState" :showindex = "showindex"></Login>
</div>
</template>
<script>
import Login from '../views/login'
import Util from'../assets/Util'
import store from '../store/store'
export default {
  components: {
    Login
  },
  data () {
    return {
      navState:false,
      showPup:222,
      changeState:false,
      showindex:0,
      isLogin:0,
      navList:[
        {
          name:"个人主页",
          flag:"home",
          funName:"gotoUserIndex"
        },
        {
          name:"我的圈子",
          flag:"circle",
          funName:"gotoCircle"
        },
        {
          name:"我的活动",
          flag:"active",
          funName:"gotoActive"
        },
        {
          name:"我的游记",
          flag:"travel",
          funName:"gotoTravel"
        },
        {
          name:"我的场地",
          flag:"place",
          funName:"gotoPlace"
        },
        {
          name:"审核失败",
          flag:"failPage",
          funName:"gotoFailPage"
        },
        {
          name:"我的收藏",
          flag:"collete",
          funName:"gotoCollete"
        },
        {
          name:"历史救援",
          flag:"help",
          funName:"gotoHelp"
        },
        {
          name:"账号设置",
          flag:"set",
          funName:"gotoSet"
        }
      ]
    }
  },
  mounted() {
    this.islogin();
    this.uploadStore();
  },
  methods: {
    openPopup(e){
      let mark = e.target.getAttribute("mark");
      this.changeState = true;
      this.showindex = parseInt(mark);
    },
    change(changeState){
      this.changeState = !changeState
    },
    // 导航
    goFiled: function(){
      this.$router.push({path:'/fieldList'})
    },
    // 跳转首页
    goHome(){
      this.$router.push({path:'/home'})
    },
    // 跳转圈子
    goCommunity(){
      this.$message.warning("近期开放，敬请期待");
      // this.$router.push({path:'/communityList'})
    },
    goActivity(){
      this.$router.push({path:'/activityList'})
    },
    islogin(){
      let loginInfo = Util.isLogin();
      if(loginInfo){
        this.isLogin = 1;
      }
    },
    uploadStore(){
      store.commit("setHeadPic", localStorage.getItem("userHeadPic"));
      store.commit("setNickName", localStorage.getItem("userNickName"));
    },
    gotoUser(){
      this.$router.push({
        path: '/user'
      })
    },
    // 跳转其他页面
    gotoOtherPage(flag){
      let path = "";
      switch (flag) {
        case "home":
          path = "/user";
          break;
        case "circle":
          path = "/UserCircle";
          break;
        case "active":
          path = "/userActivity";
          break;
        case "travel":
          path = "/UserTravel";
          break;
        case "place":
          path = "/UserPlace";
          break;
        case "collete":
          path = "/UserCollect";
          break;
        case "failPage":
          path = "/userVerifyFailed";
          break;
        case "help":
          path = "/historyHelp";
          break;
        case "set":
          path = "/userInfo";
          break;
      }
      this.$router.push({
        path:path
      });
    },
    changeNavStateTrue(){
      this.navState = true;
    },
    changeNavStateClose(){
      this.navState = false;
    },
    logOut(){
      localStorage.setItem("token", "");
      localStorage.setItem("uId", "");
      localStorage.setItem("userHeadPic", "");
      localStorage.setItem("userNickName", "");
      this.$router.push({path:'/'})
    }
  }
}
</script>
<style lang="less" scoped>
    .el-header, .el-footer {
    padding:0;
  }
  ul>li{
    cursor: pointer;
  }
  .userHeadPic{
    border-radius:50%;
    vertical-align: middle;
    width: 50px;
    height: 50px;
  }
  .login{
    height:80px;
    line-height:80px;
  }
  .topBar{
    top:80px;
  }
</style>
